import React from 'react';
import ReactDOM from 'react-dom';

export default class ComponentHeader extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			miniHeader: false //默认是高的头部 即:20px
		}
	}
	switchStyle() {
		this.setState({
			miniHeader: !this.state.miniHeader // 改成true是不行的
		})
	}
	render() {
		// 内联样式
		const styles = {
			header: {
				backgroundColor: "#333",
				color: "#fff",
				textAlign:"center",
				// 这样也可以 必须得加引号.例如: "padding-top":"3px"
				// 推荐这样书写css
				paddingTop: (this.state.miniHeader) ? "3px" : "20px",
				paddingBottom: (this.state.miniHeader) ? "3px" : "20px"
			},
			h3:{
				margin:0,
				padding:0
			}
		}
		return (
			<header style={styles.header} onClick={this.switchStyle.bind(this)}>
				<h3 style={styles.h3}>这是一个头部</h3>
			</header>
		)
	}
}